<template>
    <view class="xilu">
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
            <block v-for="(item,index) in messagelist">
                <view class="fs24 cola tc ptb30">{{item.createtime_text}}</view>
                <view class="xilu_notice " :class="(item.read==0?'noread':'')" @click="bindDetail(index,item)">
                    <view class="fs34 fwb col10 pb10">{{item.title}}</view>
                    <view class="fs30 col89">{{item.content}}</view>
                </view>
            </block>
        </mescroll-body>
    </view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
		 mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
				messagelist:[]
            };
        },
        methods: {
           /*上拉加载的回调*/
           upCallback(page) {
               // 此处可以继续请求其他接口
               let pageNum = page.num; // 页码, 默认从1开始
               let pageSize = page.size; // 页长, 默认每页10条
               this.$core.get({url: 'xilumarket.message/system_list',loading: false,data: {page: pageNum,pageSize: pageSize},success: (ret) => {
                       let data = ret.data;
                       // 接口返回的当前页数据列表 (数组)
                       let curPageData = data.data;
                       // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                       let curPageLen = curPageData.length;
                       // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                       let totalPage = data.last_page;
                       // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                       //let totalSize = data.total;
                       // 接口返回的是否有下一页 (true/false)
                       //let hasNext = data.current_page;
           
                       //设置列表数据
                       if (page.num == 1) this.messagelist = []; //如果是第一页需手动置空列表
                       this.messagelist = this.messagelist.concat(curPageData); //追加新数据
           
                       // 请求成功,隐藏加载状态
                       //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                       this.mescroll.endByPage(curPageLen, totalPage);
           
           
                       setTimeout(() => {
                           this.mescroll.endSuccess(curPageLen)
                       }, 20)
                   },
                   fail: () => {
                       //  请求失败,隐藏加载状态
                       this.mescroll.endErr()
                   }
               })
           },
		   
		   bindDetail(index,message){
			   //console.log(message);
			   if(message.read == 0){
				this.$core.post({url: 'xilumarket.message/set_read',data: {message_id:message.id,type:'system'},loading: false,success: ret => {
						this.messagelist[index].read = 1;
						
					},fail: err => {
						console.log(err);
						return false;
					}
				});
			   }
			   let url = "/pages/buy_order_detail/buy_order_detail?id="+message.extra.order_id;
			   if(message.type == 1 || message.type == 2){
				   url = "/pages/order_detail/order_detail?id="+message.extra.order_id;
			   }else if(message.type == 3){
				    url = "/pages/my_income/my_income"
			   }
			   uni.navigateTo({
			   	url:url
			   })
		   }
		}

    }
</script>

<style lang="scss" scoped>
    .xilu {
        background-color: #F7F9FC;

        &_notice {
            margin: 0 30rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
            padding: 30rpx;
            position: relative;

            &.noread::after {
                content: "";
                display: block;
                width: 12rpx;
                height: 12rpx;
                background: var(--red);
                border-radius: 50%;
                position: absolute;
                right: 20rpx;
                top: 20rpx;
            }
        }
    }
</style>
